<template>
  <a-modal class="common-modal1" :footer="null" :width="1200" :visible="visible" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <template #title>
      <a-tabs v-model:activeKey="params.processType" size="small" @change="onTabsChange">
        <a-tab-pane :key="2" :tab="$t('menu.basic:styleprocess')"></a-tab-pane>
        <a-tab-pane :key="1" :tab="$t('menu.basic:basicprocess')"></a-tab-pane>
      </a-tabs>
    </template>
    <div class="p-20">
      <a-form layout="inline">
        <a-form-item :label="$t('basicData.section')">
          <a-select v-model:value="params.section" :placeholder="$t('common.pleaseSelect')">
            <!-- <a-select-option v-for="(item,index) in sectionList" :value="item.name" :key="index">{{ item.name}}</a-select-option> -->
            <a-select-option v-for="(item,index) in [$t('components.dg')]" :value="item " :key="index">{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('basicData.processNo')">
          <a-input v-model:value.trim="params.processNo" :placeholder="$t('basicData.pleaseInputProcessNo')" allowClear @keyup.enter="loadData" />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="loadData">{{$t('common.see')}}</a-button>
            <a-button @click="searchReset">{{$t('common.reset')}}</a-button>
          </a-space>
        </a-form-item>
      </a-form>
      <a-table class="pt-20" :loading="loading" rowKey="id" bordered size="small" :dataSource="dataSource" :columns="modalColumns" :rowSelection="{selectedRowKeys: selectedKeys, onChange: onSelectChange, getCheckboxProps: getCheckboxProps}" :pagination="false" :scroll="{ y: 500}">
      </a-table>
      <a-row class="mt-15">
        <a-col :span="6" class="line-height-32">
          {{$t('common.selected') }} {{selectedLists.length}} {{$t('common.item')}}
        </a-col>
        <a-col :span="18" class="text-right">
          <a-pagination v-model:current="params.pageNo" @change="loadData" :total="total" show-less-items />
        </a-col>
      </a-row>
    </div>
    <div class="common-modal-footer">
      <a-button @click="handleCancel" class="cancel">{{$t('common.cancel')}}</a-button>
      <a-button @click="handleOk" type="primary" class="confirm">{{$t('common.ok')}}</a-button>
    </div>

  </a-modal>
</template>

<script setup>
import { modalColumns } from './processConfig'
// import { store } from "@/store";
// import { computed, ref, onMounted } from 'vue'
import { ref, onMounted } from 'vue'
import axios from '@/utils/request'
import i18n from '@/locales/index' 
const { t } = i18n.global
const emits = defineEmits(['ok'])
// 当前版本只能选择“吊挂”一个工段
// let sectionList = computed(() => { return store.state.normalData.sectionList })
let loading = ref(false)
let visible = ref(false)
let params = ref({
  section: t('components.dg'),
  pageSize: 10
})
let dataSource = ref([])
let selectedKeys = ref([])
let selectedLists = ref([])
let listSelectedIds = ref([])
let total = ref(0)
const open = async (styleId, selectedIds) => {
  listSelectedIds.value = selectedIds
  queryParams(styleId)
  visible.value = true
  await loadData()
  console.log("🚀 ~ open ~ styleId", styleId)
}
const getCheckboxProps = record => ({
  disabled: listSelectedIds.value.includes(record.id),
  name: record.id,
})
const queryParams = (styleId) => {
  params.value.processType = 2
  params.value.pageNo = 1
  params.value.styleId = styleId
}
const onTabsChange = () => {
  params.value.pageNo = 1
  loadData()
}
const loadData = async () => {
  loading.value = true
  onSelectChange([], [])
  try {
    let url = params.value.processType == 1 ? '/api/basic/basic-process/page' : '/api/basic/style-process/page'
    const res = await axios.postAction(url, params.value)
    if (res.success) {
      total.value = res.success ? res.data.total : 0
      dataSource.value = res.success ? res.data.list : []
    }
    loading.value = false
  } catch {
    loading.value = false
    total.value = 0
    dataSource.value = []
  }
}

const searchReset = () => {
  params.value.section = t('components.dg')
  params.value.processNo = ''
  params.value.pageNo = 1
  loadData()
}
const onSelectChange = (selectedRowKeys, selectedRows) => {
  selectedKeys.value = selectedRowKeys
  selectedLists.value = selectedRows
}
const handleOk = () => {
  emits('ok', selectedLists.value)
  handleCancel()
}
const handleCancel = () => {
  visible.value = false
}
onMounted(async () => {
  // await store.dispatch("getSection")
})
defineExpose({
  open
})
</script>
